<div class="outcome-icon {{status}}" data-tooltip="top" title="{{statusTooltip}}">
  <span class="screenreader-only">
    {{#t}}Outcome: {{title}} has a status of {{statusTooltip}}{{/t}}
  </span>
  {{#if scoreDefined}}
    {{addMasteryIcon status}}
  {{else}}
    <i aria-hidden="true" class="icon-empty"></i>
  {{/if}}
</div>
<div class="outcome-properties">
  <div class="title" data-tooltip title="{{#if hover_name}}{{hover_name}}{{/if}}">
    <h4>
      {{friendly_name}}
      {{#if hover_name}}
        <span class="screenreader-only">
          {{ hover_name }}
        </span>
      {{/if}}
    </h4>
  </div>
  <div class="description">{{{description}}}</div>
</div>
<div class="alignment-info">
  <a href="#tab-outcomes/{{id}}" role="button" aria-haspopup='true' aria-controls='outcome_detail'>
    {{#t}}<strong>{{n count}}</strong> Alignments{{/t}}
  </a>
  <a class="more-details"
    href="#"
    role="button"
    tabindex="0">
    <i class="icon-more" role="presentation"></i>
    <span class="screenreader-only">
      {{#t}}click for more details on this outcome{{/t}}
    </span>
  </a>
</div>
